<template>
<!-- 合同操作日志 -->
    <div>
      <el-container>
         <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
          <div style="display: block;margin:0 auto;">
            <el-input
            placeholder="请输入合同编号"
            clearable
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="contractNo">
            </el-input>
            <el-button type="primary" size="mini" style="margin-left: 5px"
              icon="el-icon-search" @click="searchEmp" :disabled="advanceSearchViewVisible">搜索
            </el-button>
          </div>
         </el-header>
        <el-main>
          <!-- 表单列表 -->
          <div>
            <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              @sort-change="sortChange"
              :highlight-current-row="true"
              style="width: 100%">
              <el-table-column
                label="合同编号"
                prop="contractNo"
                align="center"
                width="200">
              </el-table-column>
              <el-table-column
                label="操作人姓名"
                prop="operateBy"
                align="center"
                width="200">
              </el-table-column>
              <el-table-column
                align="center"
                width="250"
                label="操作时间"
                sortable="custom"
                prop="operateTime">
              </el-table-column>
              <el-table-column
                align="center"
                width="400"
                label="操作日志"
                :show-overflow-tooltip="true">
                <template slot-scope="scope">
                   <span v-html="scope.row.operateLog"></span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                background
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="currentChange"
                layout="prev, pager, next"
                :total="totalCount"
                style="margin:50px;">
            </el-pagination>
            <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
          </div>
        </el-main>
      </el-container>
    </div>
</template>
<script>
export default {
  data() {
    return {
      contractNo: "",
      sort:"01",
      advanceSearchViewVisible: false,
      faangledoubleup: "fa-angle-double-up",
      faangledoubledown: "fa-angle-double-down", 
      birthdayOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      table: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      tableSearchModel: "common",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData: function() {
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    // 请求列表数据
    requestTableInfo: function(model, pageCount, pageSize) {
      var that = this;
      //根据合同编号搜查的普通模式
      if (model == "common") {
        that.tableLoading = true;
        that
          .postRequest("/contract_op_log/mg", {
            contractNo: that.contractNo,
            sort:that.sort,
            pageIndex: pageCount,
            pageSize: pageSize
          })
          .then(resp => {
            that.tableLoading = false;
            if (resp && resp.data.status == 200) {
              that.table = resp.data.obj.rows;
              that.totalCount = resp.data.obj.total;
            }
          });
      } else if (model == "senior") {
        //高级搜索模式
        
      }
    },
    //列表当前页改变
    currentChange: function(currentChange) {
      this.currentPage = currentChange;
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    // 点击高级搜索
    showAdvanceSearchView() {
      this.advanceSearchViewVisible = !this.advanceSearchViewVisible;
      this.contractNo = "";
      if (this.tableSearchModel == "common") {
        this.tableSearchModel = "senior";
      } else if (this.tableSearchModel == "senior") {
        this.tableSearchModel = "common";
      }
    },
    //取消高级搜索
    cancelSearch: function() {
      this.advanceSearchViewVisible = false;
      this.tableSearchModel = "common";
    },
    // 普通搜索
    searchEmp: function() {
      this.currentPage = 1;
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    //高级搜索
    search: function() {
      this.currentPage = 1;
      this.requestTableInfo(
        this.tableSearchModel,
        this.currentPage,
        this.pageSize
      );
    },
    sortChange(){
      if(this.sort=="00"){
        this.sort="01";
        this.currentPage = 1;
        this.requestTableInfo(
          this.tableSearchModel,
          this.currentPage,
          this.pageSize
        );
      }else if(this.sort=="01"){
        this.sort="00";
        this.currentPage = 1;
        this.requestTableInfo(
          this.tableSearchModel,
          this.currentPage,
          this.pageSize
        );
      }
    }
  }
};
</script>
<style scoped>
.el-main{
    display: flex;
    justify-content:center;
}
</style>
